Javascript

Introduction

javascript thinking vs doing

Historique

  • Créé par Brendan Eich en 1996
  • normalisé par ECMA en 1998
  • 3è édition en juin 2002
  • 5è édition en juin 2011
  • 6è édition en juin 2015
  • changement du processus de normalisation en 2016
  • 7è édition en juin 2016
  • 8è édition en juin 2017
  • etc...

Hier

google facebook

Aujourd'hui

Son nom

Javascript is to Java what hamster is to ham

  • Confusion persistente avec Java
  • Suffixe "script" laissant croire à un sous-langage

Domaines d'action

Navigateurs évidemment, mais aussi :

  • Node.js (javascript côté serveur)
  • Extensions des logiciels Mozilla (Firefox, Thunderbird)
  • Flash (ActionScript)
  • Suite Adobe (Photoshop, Illustrator, etc)
  • Windows (Windows Scripting Host)
  • etc

Compatibilité des navigateurs

Problématique à l'époque d'Internet Explorer, beaucoup moins maintenant.

Microsoft Edge s'appuie désormais sur Chromium, la même base que Google Chrome. Les différences entre Chromium et Firefox sont mineures.

Editeur de code


Visual Studio Code s'impose comme le meilleur
(open source et portable).

Outils intégrés au navigateur

  • Console Web (F12)

Outils de développement

  • Node.js pour gérer les dépendances (NPM) et installer d'autres outils
  • ESLint pour la qualité de code
  • Git pour la gestion des versions

Aperçu syntaxique

Sensibilité à la casse

let toto = "toto";
let Toto = "tata";

//toto et Toto sont 2 variables distinctes.

Aperçu syntaxique

Points-virgules

Malgré un mécanisme d' insertion automatique de points-virgules, en l'absence d'un outil de qualité de code il est conseillé de terminer toutes les instructions par un point virgule.

let toto = "toto"
let Toto = "tata"
console.log(Toto)
//ok mais déconseillé

Ecriture préconisée

let toto = "toto";
let Toto = "tata";
console.log(Toto);

Point-virgules

Exemple de piège

let toto = "toto";

[1,2,3,4].forEach(function(nb) { console.log(nb); });

//écrit 1, 2, 3 et 4 dans la console de debuggage
let toto = "toto"

[1,2,3,4].forEach(function(nb) { console.log(nb); });

/*
Exception: "toto"[4] is undefined
le caractère [ n'appelle pas le mécanisme d'insertion automatique
de points-virgule
*/

Aperçu syntaxique

commentaires

let toto; //commentaire sur une seule ligne

/* commentaire
sur
plusieurs
lignes
*/

Modules

index.js

import monModule, { maFonction } from "./monModule.js";

monModule.js

export function maFonction() { /* ... */ }

export default {
  tata : "tata",
  toto : "toto"
}

Chaque module possède son propre contexte d'exécution.

Remarque : On peut utiliser l'extension Live Server de VSCode pour utiliser facilement les modules.